<template>
  <view>
    <uv-navbar
      placeholder
      class="head"
      leftIconColor="#fff"
      bg-color="transparent"
      title="我的订单"
      @leftClick="leftClick"
    ></uv-navbar>

    <view
      v-for="(item, index) in user_order_list"
      class="order"
      :key="item.id"
      @click="toPay(item)"
    >
      <view class="info">
        <image class="preview" :src="item.details[0]?.product.thumb"></image>
        <view class="message">
          <view class="name">{{ item.name }}</view>
          <view class="cost">
            <text>¥{{ item.amount }}</text>
            <text :class="['state', { unpay: +item.status === 1 }]">{{
              formatStatus(item.status)
            }}</text>
          </view>
          <view class="create-time"> 下单时间：{{ item.created_at }} </view>
        </view>
      </view>
      <view class="sn"> 订单编号：{{ item.no }} </view>
    </view>
  </view>
</template>
<script>
import { orderList } from "@/api/shopApi/order";
const statusString = {
  1: "未支付",
  2: "支付成功",
  3: "订单完成",
  4: "超时未支付",
  5: "申请退款",
  6: "退款"
};
export default {
  components: {},
  data() {
    return {
      user_order_list: []
    };
  },
  async created() {
    const res = await orderList();
    if (res.error_code === 0) {
      this.user_order_list = res.data.data;
    }
  },
  methods: {
    toPay(item) {
      if (+item.status === 1) {
        uni.navigateTo({
          url: `/pages/tabbar/tabbar-shop/index/order_pay?order_id=${item.no}&count=${item.amount}`
        });
      }
    },
    formatStatus(status) {
      return statusString[status];
    },
    leftClick() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped lang="scss">
page {
  background: linear-gradient(180deg, #222a2c 6.25%, #080e12 59.37%);
  /* height: 100%; */
  padding: 8px 0;
}
.order {
  width: 84%;
  padding: 20rpx 4%;
  border-radius: 10rpx;
  background: #141b1e;
  margin: 0 auto 20px;
  .info {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
  .message {
    width: 100%;
    overflow: hidden;
  }
  .name {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 8px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .create-time {
    font-size: 12px;
    color: #666666;
  }
  .cost {
    color: #92ffec;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    .state {
      padding: 2px 12px;
      border-radius: 15px;
      margin-left: 10px;
      font-size: 12px;
      background-color: #080e12;
      color: #999999;
    }
    .unpay {
      background-color: #1d545e;
      color: #92ffec;
    }
  }
  .sn {
    color: #999999;
    font-size: 12px;
  }
}
</style>
